// @ts-nocheck
import React, { useState, useEffect } from 'react';
import './index.less';
import { history } from 'umi';
import { NavBar, SearchBar, List, IndexBar, Toast } from 'antd-mobile/es';
import axios from 'axios';
import request from 'umi-request';
import 'lib-flexible';

export default function Search(props) {
  const [hot, sethot] = useState([]);
  const [state, setstate] = useState([]);
  const [citylocation, setcitylocation] = useState([
    { label: '上海', value: 'AREA%7Cdbf46d32-7e76-1196' },
  ]);

  const charCodeOfA = 'A'.charCodeAt(0);

  const groups = Array(26)
    .fill('')
    .map((_, i) => ({
      title: String.fromCharCode(charCodeOfA + i),
      items: state.map((item, index) => {
        var title = String.fromCharCode(charCodeOfA + i);
        // console.log(`item.short[0]`, item.short.slice(0, 1).toUpperCase());
        if (item.short.slice(0, 1).toUpperCase() == title) {
          // console.log(`item`, item);
          return item;
        }
      }),
    }));
  useEffect(() => {
    request('http://shiyansong.cn:8080/area/city?level=1', {
      method: 'get',
    }).then((res) => {
      // console.log(res.body, 11111111111111);
      setstate(res.body);
      // console.log(`state`, state);
    });
    request('http://shiyansong.cn:8080/area/hot', {
      method: 'get',
    }).then((res) => {
      // console.log(res.body, 22222222222);
      sethot(res.body);
      // console.log(`state`, state);
    });
    if (localStorage.getItem('hkzf_city') != null) {
      //获取到存在本地session里存的数据
      setcitylocation(JSON.parse(window.localStorage.getItem('hkzf_city')));
      console.log(`citylocation`, citylocation);
    }
  }, []);

  const ChooseCity = (item) => {
    // console.log(item);
    let hkzf_city = [
      {
        label: item.label,
        value: item.value,
      },
    ];
    localStorage.setItem('click_city', JSON.stringify(hkzf_city));
    history.push('/home');
  };

  return (
    <div className="Search">
      <div className="Search_Top">
        <NavBar
          onBack={() => {
            history.push('/home');
          }}
        >
          选择城市
        </NavBar>
      </div>

      <div className="citySort" style={{ height: window.innerHeight }}>
        <IndexBar className="indexbar">
          <IndexBar.Panel index={'#'} title="当前定位" key="当前定位">
            <List>
              {citylocation.map((item, index) => (
                <List.Item
                  arrow={false}
                  key={index}
                  onClick={() => ChooseCity(item)}
                >
                  {item.label}
                </List.Item>
              ))}
            </List>
          </IndexBar.Panel>
          <IndexBar.Panel index={'热门城市'} title="热门城市" key="热门城市">
            <List>
              {hot.map((item, index) => (
                <List.Item
                  arrow={false}
                  key={index}
                  onClick={() => ChooseCity(item)}
                >
                  {item.label}
                </List.Item>
              ))}
            </List>
          </IndexBar.Panel>
          {groups.map((group) => {
            const { title, items } = group;
            // console.log(`items`, items);
            var newArr = [...new Set(items)];
            // console.log(`newArr`, newArr);
            newArr = newArr.filter(function (n) {
              return n;
            });
            return (
              <IndexBar.Panel index={title} title={title} key={`标题${title}`}>
                <List>
                  {newArr.map((item, index) => (
                    <List.Item key={index} onClick={() => ChooseCity(item)}>
                      {item.label}
                    </List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            );
          })}
        </IndexBar>
      </div>
    </div>
  );
}
